<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>007-BFC</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<!--
    BFC是布局过程中生成块级盒子的区域，也是浮动元素与其他元素交互的区域。

    触发BFC的条件，一个HTML元素符合以下任意一种条件就会创建BFC:
    1. 根元素或其它包含它的元素；
    2. 浮动元素(float不为none)；
    3. 绝对定位元素(position为absolute或fixed)；
    4. inline-block元素；
    5. table单元和标题；
    6. overflow不为visible的元素。

    BFC的特性：
    1. 内部Box会垂直排列,与外部无关；
    2. 属于同一BFC的相邻Box的margin会重叠；
    3. 每个元素的左外边距与包含块的左边界相接触；
    4. BFC区域不会与浮动元素重叠；
    5. BFC是一个独立的容器,内部元素不会影响外部元素；
    6. 计算BFC高度时，浮动元素也会参与计算。

    BFC可解决的问题：
    1. 外边距重叠问题；
    2. 包含浮动元素的高度塌陷问题；
    3. 两列自适应布局；
    通过创建BFC,可以将浮动元素或外边距重叠的元素包裹起来,使其与外部元素互不影响,从而解决相关布局问题。
    -->

		<!--
    1. 父子元素之间的外边距塌陷。
     解决方法: overflow: hidden" 解决
    -->
		<h3>父子元素之间的外边距塌陷</h3>
		<div style="width: 200px; height: 200px; background-color: skyblue; overflow: hidden">
			<div style="width: 100px; height: 100px; background-color: pink; margin: 30px"></div>
		</div>

		<br />
		<hr />
		<br />

		<!--
    2. 兄弟元素之间外边距重叠。
    两个都是正数，则取最大值；
    两个都是负数，则取绝对值较大的值；
    一正一负，两个值的和。
    解决方法: 给第二个div使用div进行包裹，并设置 overflow: hidden" 解决
    -->
		<h3>兄弟元素之间外边距重叠</h3>
		<div style="width: 100px; height: 100px; background-color: red; margin-bottom: 30px"></div>
		<div style="overflow: hidden">
			<div style="width: 100px; height: 100px; background-color: blue; margin-top: 10px"></div>
		</div>

		<br />
		<hr />
		<br />

		<!--
    3. 解决浮动导致产生的元素覆盖问题。
    解决方法:
    1. 使用 clear: both 清除浮动，第二个div会变成块级元素。
    2. 使用 overflow: hidden 第二个div会变成行内块元素。
    -->
		<div style="width: 300px; height: 400px; border: 3px solid black">
			<div style="float: left; width: 200px; height: 100px; background-color: red"></div>
			<div style="height: 400px; background-color: blue; overflow: hidden"></div>
		</div>
	</body>
</html>
